

new Vue({
    el: '#app',
    data: {
      // url:'http://192.168.0.116:5234',
      url:'http://192.168.1.120:5234',
      pageType:0,
      ruleForm:{userName:'admin',passWord:'123'},
      rules:{userName:[{ required: true, message: '请输入账号', trigger: 'blur' }],
      passWord:[{ required: true, message: '请输入密码', trigger: 'blur' }]},
      state:true,
      cNum:8,
      state2:false,
      cNum2:0,
      userName:'TP-Link',
      passWord:'123456',
      userName2:'Guest',
      passWord2:'123456',
      tabs:[ {name:'网络状态',num:9},{name:'设备管理',num:9},{name:'ICE61850协议转换器',num:9},{name:'系统设置',num:9}],
      activeNavTab:0,
      // activeTab==2&&activeNavTab===0
      // filterObj:{uuid:[],offset:[]},  //筛选条件
      ModbusColum:[{name:'IP',prop:'val1',value:'127.0.0.1'},{name:'端口',prop:'val2',value:'1'},{name:'长度',prop:'val3',value:''},{name:'起始地址',prop:'val4',value:''},
      {name:'功能码',prop:'val5',value:'1',options:['1_5','2','3_6','4']}],
      ModbusForm: {ipAddress: '127.0.0.1', port: '502', type: 'TCP', id: ''},
      rules: {
        ipAddress: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        port: [
          { required: true, message: '请输入端口', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
      },
      //activeNavTab===3  lan
      LanOptions:[{value:1,label:'LAN口1'},{value:2,label:'LAN口2'},{value:3,label:'LAN口3'},{value:4,label:'LAN口4'}],
      lanValue:1,
      lanCulom:[{name:'MAC地址',prop:'macAddr',value:'24-69-68-D5-3F-BC'},{name:'LAN口IP设置',prop:'lanIp',value:1,options:['自动(推荐)','手动']},
      {name:'IP地址',prop:'ip',value:'192.168.0.101'},{name:'子网掩码',prop:'subnet',value:'225.225.225.0'}],
      lanForm:{macAddr:'24-69-68-D5-3F-BC',lanIp:'1',ip:'192.168.0.101',subnet:'225.225.225.0'},
      // fileValue:'',
      // activeNavTab===3 密码
      pswForm:{oldPassword:'',newPassword:'',confirmPassword:''},
      pswRules: {
        oldPassword: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入端口', trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
      },
      // activeTab==3&&activeNavTab===7
      // fileValue1:'',
      setFlag:true,
      timeSet:'',
      timer:null,
      dataNow:'',
      // activeTab==3&&activeNavTab===8
      // logColum:['索引','类型','内容日志'],
      // logTableData:[{index:'125',type:'INFO',note:'6days, 22:08:50,DHCPS: Send NAK to 0.0.0.0, lease ip 192.168.0.105.'}], 
      // 树形控件
      topTitle:'',
      rightData:[],
      modbusData:{},
      modbusUuid:null,
      dialogVisible:false,
      rightSet:{type:'',modbus:''},      
      ipAddress:'192.168.0.10',
      port:'5234',
      treeData: [],
      defaultProps: {
      children: 'children',
      label: 'name',
      },
      curUuid:'',
      defaultShowNodes:[],
      tabRowIndex:null,
      tabColumnIndex:null,
      tableData:[],
      // filterTableData:[]
    },
    mounted() {
      this.loginCheck()
      this.url=window.location.href
    },
    methods: {
      treeHandle(){
        // 左侧拖拽
        let left = document.getElementById('left');
        let line = document.getElementById('line')
        let right = document.getElementById('right');
        var mouse_x = 0;
        var max_width = 600,
        min_width = 100;
        //绑定鼠标按下事件
        line.onmousedown = function (e) {
          var e = e || window.event;
          //阻止默认事件
          e.preventDefault();
          mouse_x = e.clientX - left.offsetWidth;
          document.onmousemove = function (e) {
            var e = e || window.event;
            var left_width = e.clientX - mouse_x;
            left_width = left_width < min_width ? min_width : left_width;
            left_width = left_width > max_width ? max_width : left_width;
            left.style.width = left_width + 'px';
            right.style.left = left_width + 'px';
          };
          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }
      },
      loginCheck(){
        let token=localStorage.getItem('token')
        if(token&&token!=''){
          this.pageType=1
        }else{
          this.pageType=0
        }
      },
      login(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.pageType=1
            this.activeNavTab=0
            localStorage.setItem('token',this.ruleForm.userName)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      logout(){
        localStorage.removeItem('token')
        this.pageType=0
      },
      handleNodeClick(data) {
        console.log(data);
      },
      // axioscs(){
      //   axios.get('https://dlweb.sogoucdn.com/pcweb/static/img/sprite_header@2x.0b72998f.png', {

      //   }).then( (response)=> {
      //     console.log(response);
      //   })

      // },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      fresh(){
        this.getTreeData()
      },
      getTreeData(){
        axios.post(this.url+'/local/tree', {
          "ipAddress": this.ipAddress,
          "port": this.port
        }).then(res => {
          if(res.data.code == 200) {
            // console.log(res.data.data,888);
            this.rightData=[]
            this.treeData=[res.data.data]
          }
        })
      },
      getCell(row,column,cell,event){
        this.tabRowIndex=row.index
        this.tabColumnIndex=column.index
      },
      getRowColumn({row,column,rowIndex,columnIndex}){
          row.index=rowIndex
          column.index=columnIndex
      },
      inputBlur(){
          this.tabRowIndex=null
          this.tabColumnIndex=''
      },
      save(){

      },
      async getIecTableData(){
        let res=await axios.post(this.url+'/local/allNode',{})
        if(res.data.code == 200) {
          this.tableData=res.data.data
          this.tableData.forEach(v=>{
            // this.$set(v,'offset',v.modeBusBean?v.modeBusBean.offset:'')
            this.$set(v,'offset',v.modeBusBean?v.modeBusBean.offset:undefined)
            if(typeof v.data.value=='object'){
              this.$set(v,'disable',true)               
            }else{
              this.$set(v,'disable',false)               
            }
          })
          // this.filterTableHandle()
        }
        // axios.post(this.url+'/local/allNode', {
        // }).then(res => {
        //   if(res.data.code == 200) {
        //     this.tableData=res.data.data
        //     this.tableData.forEach(v=>{
        //       // this.$set(v,'offset',v.modeBusBean?v.modeBusBean.offset:'')
        //       this.$set(v,'offset',v.modeBusBean?v.modeBusBean.offset:undefined)
        //       if(typeof v.data.value=='object'){
        //         this.$set(v,'disable',true)               
        //       }else{
        //         this.$set(v,'disable',false)               
        //       }
        //     })
        //   }
        // })
      },
      setValue(row){
        console.log(row,788);
        let uuidArr=row.uuid.split('.')
        uuidArr.pop()
        let uuid=uuidArr.join('.')
        console.log(uuid,99);
        let list=[{uuid:row.uuid,data:row.data}]
        axios.post(this.url+"/local/write", {
          "ipAddress": this.ipAddress,
          "port": this.port,
          "uuid": uuid,
          "list": list
        }).then(res => {
            if(res.data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              });    
            }
        })
      },
      removeModbus(row){
        console.log(row);
        let param=encodeURIComponent(row.uuid)
        axios.delete(this.url+`/local/bind/modbus/?uuid=${param}`).then(res => {
          if(res.data.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });  
            this.refreshTable()
          }else{
            this.$message({
              message: "删除失败",
              type: "warning"
            });  
          }
        })
      },
      setModbus(row){
        // console.log(row.offset==undefined,row.offset=='',788);
        if(row.offset===undefined||row.offset===''||isNaN(row.offset)||row.offset<0||row.offset>60000){
          this.$message({
            message: "请输入0-60000的数字",
            type: "warning"
          });    
          return
        }
        let uuidArr=row.uuid.split('.')
        uuidArr.pop()
        let uuid=uuidArr.join('.')
        if(row.modeBusBean){
          this.$set(row.modeBusBean,'offset',row.offset)
          this.$set(row.modeBusBean,'uuid',row.uuid)
        }else{
        // {
        //   "bean": {
        //     "digit": 0,
        //     "id": "402880817a83fbfb017a83fc93030096",
        //     "iecAddress": "LC11AA1U1/GGIO0.AIO151.setVal|SP",
        //     "offset": 63,
        //     "quantity": 1,
        //     "serverAddress": 1,
        //     "type": "HOLDING_REGISTER"
        //   },
        //   "uuid": "LC11AA1U1/GGIO0.AIO151"
        // }
          row.modeBusBean= {
                "digit": 0,
                "id": "",
                "iecAddress": row.uuid,
                'uuid': row.uuid,
                "offset": row.offset,
                "quantity": 1,
                "serverAddress": 1,
                "type": "HOLDING_REGISTER"
              }
        }
        axios.post(this.url+'/local/bind/modbus', {
            "bean": row.modeBusBean,
            "uuid": uuid
        }).then(res => {
          if(res.data.code == 200) {
            this.tabRowIndex=null
            this.tabColumnIndex=''
            this.$message({
              message: "设置成功",
              type: "success"
            });  
            // this.getLeafNode(this.curUuid)
          }else{
            this.$message({
              message: "设置失败",
              type: "warning"
            });  
          }
        })
      },
      edit(){
        // console.log(this.rightData,828);
        if(this.curUuid=='')return
        axios.post(this.url+"/local/write", {
          "ipAddress": this.ipAddress,
          "port": this.port,
          "uuid": this.curUuid,
          "list": this.rightData
        }).then(res => {
            if(res.data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              });    
              this.getTreeData() 
              // this.getLeafNode(this.curUuid)
            }
        })
      },
      getLeafNode(uuid){
        axios.post(this.url+'/local/node', {
          "ipAddress": this.ipAddress,
          "port": this.port,
          "uuid": uuid,
          "value": {}
        }).then(res => {
            if(res.data.code == 200) {
              console.log(res.data.data,888);
              let arr=JSON.parse(JSON.stringify(res.data.data))
              arr.forEach(v => {
                if(typeof v.data.value=='object'){
                  let keys=Object.keys(v.data.value)
                  let values=Object.values(v.data.value)
                  let arrItem=[]
                  keys.forEach((v1,i1)=>{
                    arrItem.push({key:v1,value:values[i1]})
                  })
                  v.optArr=arrItem
                  v.keys=keys
                }
              });
              this.rightData=arr
            }else{
              this.rightData=[]
            }
        })
      },
      handleNodeClick(data,data1,data2) {
          console.log(data,99);
            this.curUuid=data.uuid
            this.getLeafNode(data.uuid)
      },
      // Modbus设置弹框   uuid  value值  modbus offset
      settingDialog(item){
        // console.log(item,33);
        if(item.modeBusBean){
          this.dialogVisible=true
          this.modbusData=item.modeBusBean
          this.modbusUuid=item.uuid         
        }
      },
      // Modbus设置保存
      confimSet(){
        // console.log(this.modbusData,this.modbusUuid,777);
        this.$set(this.modbusData,'uuid',this.modbusData.iecAddress)
        axios.post(this.url+'/local/bind/modbus', {
            "bean": this.modbusData,
            "uuid": this.curUuid
        }).then(res => {
          if(res.data.code == 200) {
            this.$message({
              message: "设置成功",
              type: "success"
            });  
            this.dialogVisible=false
            this.getLeafNode(this.curUuid)
          }else{
            this.$message({
              message: "设置失败",
              type: "warning"
            });  
          }
        })
      },
      confirmTime(){
        console.log(this.timeSet,88);
      },
      // changeTab(item,index){
      //   this.activeTab=index
      //   this.activeNavTab=0
      //   this.getTableData()
      // },
      changeNavTab(index){
        this.activeNavTab=index
        this.getTableData()
      },
      getTableData(){
        // clearInterval(this.timer)
        // this.timer=null
        if(this.activeNavTab==2){
          this.$nextTick(()=>{
            this.treeHandle()
          })
          this.getTreeData()
        }else if(this.activeNavTab==1){
          setTimeout(() => {
            this.getIecTableData()       
          }, 300);
        }else if(this.activeNavTab==0){
          this.ModbusForm= {ipAddress: '127.0.0.1', port: '502', type: 'TCP', id: ''}
          this.getModBus();
          // this.ModbusForm=[{name:'IP',value:'127.0.0.1'},{name:'端口',value:'1'},{name:'长度',value:''},{name:'起始地址',value:''},{name:'功能码',value:'1',options:['1_5','2','3_6','4']}]
        }else if(this.activeNavTab==3){

        }
      },
      saveDhcp(){
        console.log(this.dhcpForm,88);
      },
      saveWifi(){
        console.log(this.wifiForm,88);
      },
      saveModbus() {
        console.log(this.ModbusForm,666);
        // axios.post(this.url+'/local/tree', {
        //   "ipAddress": this.ipAddress,
        //   "port": this.port
        // }).then(res => {
        axios.post(this.url + '/local/setting/modbus', {
            ipAddress: this.ModbusForm.ipAddress,
            port: this.ModbusForm.port,
            type: this.ModbusForm.type,
            id: this.ModbusForm.id
        }).then(res => {
            this.getModBus();
            alert(res.data.message);
        })
      },
      getModBus() {
          axios.get(this.url + '/local/setting/modbus').then(res => {
              this.ModbusForm = res.data.data;
          })
      },
      refreshTable(){
        axios.get(this.url + '/local/restart').then(res=>{
          if(res.data.code == 200) {
            this.$message({
              message: "刷新成功",
              type: "success"
            });  
            this.getIecTableData()
          }else{
            this.$message({
              message: "刷新失败",
              type: "warning"
            });  
          }
        })
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      handleFilterMethod(filters){
        // // console.log(filters,777);
        // this.filterObj[Object.keys(filters)[0]]=Object.values(filters)[0]
        // this.filterTableHandle()
      },
      filterTableHandle(){
        // console.log(this.filterObj,this.filterObj.uuid,666);
        // this.filterTableData=[]
        // this.tableData.forEach(v=>{
        //   let flag1=false
        //   if(this.filterObj.uuid==[0]){
        //     if(v.uuid.includes('setVal')){
        //       flag1=true
        //     }else{
        //       console.log(222);
        //       flag1=false
        //     }
        //   }else{
        //     flag1=true
        //   }
        //   let flag2=false
        //   // if(this.filterObj.offset.includes==[0]){
        //   //   if(v.offset==undefined){
        //   //     flag2=true
        //   //   }  
        //   // }else if(this.filterObj.offset.includes==[1]){
        //   //   if(v.offset!=undefined){
        //   //     flag2=true
        //   //   } 
        //   // }else{
        //   //   flag2=true
        //   // }
        //   console.log(flag1,444);
        //   if(flag1){
        //     this.filterTableData.push(v)
        //   }
        // })
        // console.log(this.filterTableData,33);
      },
      filterModbus(value, row) {
        if(value==0){
          return row.offset==undefined
        }else{
          return row.offset!=undefined
        }
      },
      filterUuid(value, row) {
        if(value==0){
          return row.uuid.includes('setVal')
        }else if(value==1){
          return row.uuid.includes('minVal')
        }else if(value==2){
          return row.uuid.includes('maxVal')
        }else{
          return row.uuid
        }
      },
      
      // 软件升级
      upSubmit(){
        var form = document.getElementById('fileId'), 
        formData = new FormData(form); 
        // axios.post("https://jsonplaceholder.typicode.com/posts/",formData).then(res=>{
        //   console.log('axios');      
        // })
      },
      upSubmit1(){
        var form = document.getElementById('fileId1'), 
        formData = new FormData(form); 
        // axios.post("https://jsonplaceholder.typicode.com/posts/",formData).then(res=>{
        //   console.log('axios');      
        // })
      },
      freshDhcp(){

      },
      // 关闭弹框
      // open(type){
      //   this.openType=type
      //   document.getElementById('help').style.visibility='visible' 
      // },
      // close(){
      //   document.getElementById('help').style.visibility='hidden' 
      // }
    }
})